Bug Tracker

Ticket #3333 (closed bug: fixed)

Opened 6 years ago

Last modified 2 years ago

.css("marginRight") is incorrect in WebKit

Reported by: soldair Owned by: rworth
Priority: blocker Milestone: 1.5.2
Component: dimensions Version: 1.5
Keywords: needsreview Cc: soldair
Blocking: Blocked by:

Description

in safari (win) and google chrome (only included because the same error occurs and both use webkit)

a call to $("#element").outerWidth({margin:true}) reports the value of parent.innerWidth()

this bug does not happen in any other browser tested ie6,firefox3,opera9.5,konqueror (tested because khtml is the webkit base)

Attachments

jquery_outerwidth_bug.jpg Download (19.0 KB) - added by soldair 6 years ago.
this is a screen shot of the bug in action
jquery_outer_width_chrome.jpg Download (14.8 KB) - added by soldair 6 years ago.
this is s creen shot of the bug in chrome
jquery_outer_width_firefox.jpg Download (21.2 KB) - added by soldair 6 years ago.
this is a screenshot of the bug not occuring in firefox
jquery_outer_width_ie6.jpg Download (15.8 KB) - added by soldair 6 years ago.
this is a screen shot of the bug not occuring in ie6
jquery_outer_width_konqueror.jpg Download (19.5 KB) - added by soldair 6 years ago.
this is a screen shot of the bug not occuring in konqueror
jquery_outer_width_opera.jpg Download (26.4 KB) - added by soldair 6 years ago.
this is a screenshot of the bug not occuring in opera

Change History

Changed 6 years ago by soldair

this is a screen shot of the bug in action

Changed 6 years ago by soldair

this is s creen shot of the bug in chrome

Changed 6 years ago by soldair

this is a screenshot of the bug not occuring in firefox

Changed 6 years ago by soldair

this is a screen shot of the bug not occuring in ie6

Changed 6 years ago by soldair

this is a screen shot of the bug not occuring in konqueror

Changed 6 years ago by soldair

this is a screenshot of the bug not occuring in opera

comment:1 Changed 6 years ago by flesler

  • Cc soldair added
  • Owner set to brandon
  • Component changed from core to dimensions

comment:2 Changed 4 years ago by rwaldron

  • Owner changed from brandon to soldair
  • Status changed from new to pending

Please provide a distilled and reduced jsFiddle test case, thanks!

comment:3 Changed 4 years ago by trac-o-bot

  • Status changed from pending to closed

Automatically closed due to 14 days of inactivity.

comment:4 Changed 4 years ago by stenehall@…

*bump*

Still broken, (os x 10.6 Safari 5.0.4)

comment:5 Changed 4 years ago by jitter

#5134 is a duplicate of this ticket.

comment:6 Changed 4 years ago by jitter

#3092 is a duplicate of this ticket.

comment:7 Changed 4 years ago by jitter

  • Priority changed from major to high
  • Status changed from closed to reopened
  • Version changed from 1.2.6 to 1.4.4
  • Milestone changed from 1.3 to 1.4.5

 test case. It looks like actually the value of margin-right in webkit/chrome is borked.

comment:8 Changed 4 years ago by jitter

  • Status changed from reopened to open

comment:9 Changed 4 years ago by timmywil

That's actually the way webkit handles display: block (as in divs). If something needs that property, it means put it on a line by itself. All browsers do this by giving the element (let's call it element A) full width so that it spans the full width of the element it is relative to in order to knock its next sibling down below, which we've all probably noticed when hovering over an H1 or something in web inspector/firebug and saw that it spanned the whole window. However, if you specify a width for element A, browsers need to do something else. The solution webkit chose was give it the necessary margin on the right to accomplish the same thing, regardless of whether the user specifies a margin-right because it usually won't matter style-wise if it's display block and all proceeding elements go below.

There is an addendum. If the element is display: block; margin-right: 3px; AND float: left; the element MUST keep its margin. You will see that if you add float: left to your #inner in the test case above, you will get the correct outerWidth. This is not a jQuery bug, but a choice on how to implement display: block in webkit.

Regardless, a possible solution would be to float the element in any direction just long enough to get the correct margins, then put it back to what it was before. I went ahead and made a pull request that utilizes swap in getWH in css.js, and added a test in the dimensions component.

 Pull request

comment:10 Changed 4 years ago by snover

#8207 is a duplicate of this ticket.

comment:11 Changed 4 years ago by jitter

  • Version changed from 1.4.4 to 1.5

comment:12 Changed 4 years ago by jboesch

I think the issue I'm working on relates to this. #4146  https://github.com/jboesch/jquery/commit/bc80f2990741891180d64605d750deaf5cdf9b8c

It's not 100% done, tests pass everywhere except 3 in IE7. Still fixing it up.

Last edited 4 years ago by jboesch (previous) (diff)

comment:13 Changed 4 years ago by jboesch

I landed a patch for ticket #4146 which I believe addresses this bug as well: http://bugs.jquery.com/ticket/4146

 https://github.com/jquery/jquery/pull/251/files

Version 0, edited 4 years ago by jboesch (next)

comment:15 Changed 3 years ago by rworth

I belive this issue is WebKit only and fixed in nightlies since Feb 2011

Last edited 3 years ago by rworth (previous) (diff)

comment:16 Changed 3 years ago by rworth

As this issue is WebKit only I think #8443 should be reopened and removed as a duplicate. The test case on #8443 shows an issue in both Safari and IE9. The test cases here (mine and jitter's) show an issue in Safari but not IE9.

comment:17 Changed 3 years ago by rworth

This issue is blocking a regression in jQuery UI 1.8.11  http://bugs.jqueryui.com/ticket/7084

comment:18 Changed 3 years ago by rworth

The best workaround I've found is to set display:inline-block on the element temporarily in order to get the correct computed margin-right value. Though I've only tested so far in Safari 5 on Windows.

comment:19 Changed 3 years ago by rwaldron

  • Cc soldair removed
  • Keywords needsreview added; outerWidth removed
  • Priority changed from high to blocker
  • Milestone changed from 1.next to 1.5.2

comment:20 Changed 3 years ago by rwaldron

  • Cc soldair added

comment:21 Changed 3 years ago by john

  • Owner soldair deleted
  • Status changed from open to assigned
  • Summary changed from jquery outerWidth reports incorrect value in saffari (3.1.2 win) and google chrome to .css("marginRight") is incorrect in WebKit

comment:22 Changed 3 years ago by john

  • Owner set to rworth

comment:22 Changed 3 years ago by Richard Worth

  • Status changed from assigned to closed
  • Resolution set to fixed

Added css hook to work around bug in WebKit computed margin-right. Fixes #3333 - .css("marginRight") is incorrect in WebKit

Changeset: c3c507e900fceb419628157504004ab2813b7d01

comment:23 Changed 2 years ago by anonymous

Note: See TracTickets for help on using tickets.