Right-button "shifts" in the "Panel: Menu + form" demo because of scrollbar #5456

Closed
salamanders opened this Issue Jan 16, 2013 · 17 comments

Projects

None yet

5 participants

@salamanders

In the 1.3.0-beta.1 demo, using the latest non-beta Chrome (OSX Version 24.0.1312.52), the right-hand "plus" button gets shifted over by the page's auto-hiding scrollbar.

On http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/panels/panel-nav-form.html
it is hard to get a screenshot of the scrollbar visible as it pushes it over, but I was able to capture the result:
Screen Shot 2013-01-15 at 10 16 22 PM

Moving the mouse over the "+" icon recenters it.
Not 100% sure if this is a Chrome bug or a jquery-beta bug.

No shifting bug in latest Firefox/Safari that I could see.

@jaspermdegroot
Member

@salamanders - Thanks for reporting the issue!

Something similar happens on Opera Mobile on Android. Going to look into this.

@arschmitz
Member

@uGoMobi i'v run into this before where chrome will not re flow content when a scrollbar is hidden. This was outside JQM. Never found a fix but honestly didn't look very hard.

@jaspermdegroot
Member

@salamanders

There was a problem with page height / scrollbar on Chrome. This has been fixed.
Can you confirm the issue you saw has been fixed as well? Thanks!
Latest: http://jquerymobile.com/test/docs/demos/panels/panel-nav-form-fixed.html

@salamanders

Nope. :( I clear my cache, open the page, don't touch a thing, and see:
http://jquerymobile.com/test/docs/demos/panels/panel-nav-form-fixed.html

green_plus

I think it may be more widespread, here is a cap from elsewhere in the docs.
other shifts

@jaspermdegroot
Member

@salamanders

I thought it was caused by a scrollbar that showed up when opening a panel (this is fixed now), but it is a general icon misalignment issue that I have noticed on Chrome before. However, I can't reproduce it anymore.
I am afraid this is a Chrome bug that we can't fix. I did a quick search in Chrome bug reports, but couldn't find anything. Might be useful to report it if the issue can also be reproduced on a simple non-JQM test page.
What are the specs of your system? (Retina? resolution?)

@arschmitz arschmitz reopened this Jan 21, 2013
@arschmitz
Member

im seeing this issue on nearly every icon only button on nearly every page on chrome 24 OS X so im going to reopen this

UPDATE: there is no difference on 1.2 it shows the same problem. I think this is actually a chrome rendering issue.

@jaspermdegroot
Member

@arschmitz

One thing we can look at is the space we add to icon-only buttons to fix some Android issues. See d3603c0.
Can you check if setting .ui-btn-icon-notext .ui-icon { font-size: 0px; } fixes it without reintroducing the Android issues?

@salamanders

Strange thing: when I hover over it, it fixes itself.
Possibly the ordering of the classes?

Hovered (fixed)
<a href="#add-form" data-icon="plus" data-iconpos="notext" class="ui-btn-right ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-notext ui-btn-up-f" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="f" title="Add">

Never hovered (broken)
<a href="#add-form" data-icon="plus" data-iconpos="notext" class="ui-btn-right ui-btn ui-btn-up-f ui-shadow ui-btn-corner-all ui-btn-icon-notext" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="f" title="Add">

@jaspermdegroot
Member

@salamanders

The order of the classes shouldn't matter. It's probably more like the hover triggers a redraw. So this is a Chrome rendering bug (almost) for sure.

@arschmitz
Member

uGoMobi: i see it really bad on my mac its a chrome rendering bug for sure there is absolutely no doubt and its in all version not just 1.3

@toddparker
Contributor

Is everyone on a retina MBP? Thinking that's the only place where you see the issue.

@paulirish
Member

I can't repro here. Could be isolated to highdpi screens (which I don't have handy)

Can someone make a reduced testcase and file at crbug.com ? I'll get it in front of an engineer.

@arschmitz
Member

This is fixed by commit# 71195ac it was an issue with an incorrect image size for the icon sprite

@arschmitz arschmitz closed this Jan 25, 2013
@jaspermdegroot
Member

@salamanders

There is a problem with our icon sprite. The issue has not been fixed yet by @arschmitz his commit. When we've replaced the icon sprite the issue will most probably be gone.
However, I am not completely sure if there isn't some other issue in play here, because it is strange that the problem is gone when you hover the icon or test without border-radius.
Maybe you can put the ticket you opened in the Chrome bug tracker on hold. Let's see if there is still an issue after we fixed things at our end.

cc: @paulirish, @toddparker

@toddparker toddparker was assigned Jan 25, 2013
@salamanders

I requested a "hold" for the chrome bug.

@jaspermdegroot
Member

We replaced the icon sprite and adjusted background position in the CSS. @arschmitz tested this on Retina MBP and the issue is resolved.

@salamanders - Thanks again for reporting the issue. Turned out to be only a problem at our end so you can close the Chrome bug report.

Closing as fixed by commit 1d293e0.

@hinaloe hinaloe pushed a commit to hinaloe/jqm-demo-ja that referenced this issue Mar 27, 2014
@arschmitz arschmitz Update css/themes/default/jquery.mobile.theme.css
Icon: Fix incorrect size for retina icon sprites Fixes: jquery/jquery-mobile#5456 (comment)
71195ac
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment