New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

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

Comments

Projects
None yet
5 participants
@salamanders

salamanders commented Jan 16, 2013

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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jan 16, 2013

Member

@salamanders - Thanks for reporting the issue!

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

Member

jaspermdegroot commented Jan 16, 2013

@salamanders - Thanks for reporting the issue!

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

@ghost ghost assigned jaspermdegroot Jan 16, 2013

@arschmitz

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Jan 16, 2013

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.

Member

arschmitz commented Jan 16, 2013

@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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jan 17, 2013

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

Member

jaspermdegroot commented Jan 17, 2013

@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

This comment has been minimized.

Show comment
Hide comment
@salamanders

salamanders Jan 17, 2013

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

salamanders commented Jan 17, 2013

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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jan 18, 2013

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?)

Member

jaspermdegroot commented Jan 18, 2013

@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

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Jan 21, 2013

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.

Member

arschmitz commented Jan 21, 2013

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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jan 21, 2013

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?

Member

jaspermdegroot commented Jan 21, 2013

@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

This comment has been minimized.

Show comment
Hide comment
@salamanders

salamanders Jan 21, 2013

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">

salamanders commented Jan 21, 2013

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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jan 24, 2013

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.

Member

jaspermdegroot commented Jan 24, 2013

@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

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Jan 24, 2013

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

Member

arschmitz commented Jan 24, 2013

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

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Jan 24, 2013

Contributor

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

Contributor

toddparker commented Jan 24, 2013

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

@paulirish

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Jan 24, 2013

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.

Member

paulirish commented Jan 24, 2013

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.

@salamanders

This comment has been minimized.

Show comment
Hide comment

salamanders commented Jan 24, 2013

@arschmitz

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Jan 25, 2013

Member

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

Member

arschmitz commented Jan 25, 2013

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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jan 25, 2013

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

Member

jaspermdegroot commented Jan 25, 2013

@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

@ghost ghost assigned toddparker Jan 25, 2013

@salamanders

This comment has been minimized.

Show comment
Hide comment
@salamanders

salamanders Jan 25, 2013

I requested a "hold" for the chrome bug.

salamanders commented Jan 25, 2013

I requested a "hold" for the chrome bug.

@ghost ghost assigned jaspermdegroot Jan 28, 2013

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jan 28, 2013

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.

Member

jaspermdegroot commented Jan 28, 2013

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 pushed a commit to hinaloe/jqm-demo-ja that referenced this issue Mar 27, 2014

Update css/themes/default/jquery.mobile.theme.css
Icon: Fix incorrect size for retina icon sprites Fixes: jquery/jquery-mobile#5456 (comment)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment