Skip to content
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

position:fixed focused button flickers on Edge+IE when scrolling #20507

Closed
os1r1s110 opened this Issue Aug 11, 2016 · 5 comments

Comments

Projects
None yet
3 participants
@os1r1s110
Copy link

os1r1s110 commented Aug 11, 2016

Okay so I looked through past issues and I did find quite a few issues on affix plugin and scrolling glitches but none seems to fit this case, so if I'm wrong thanks for pointing the solution to me.

The issue is only happening on IE and Edge. When clicking on a button, it correctly activates the said button when when action is done, focus remains on the button and if we scroll on a page with these browsers, the button then starts flickering/jumping.

You can see it with this little ply by opening with IE/Edge and simply clicking the button and scrolling afterwards.

http://codeply.com/go/i7UQ86nqLr

Operating system: Windows 10
Browsers: Chrome 52.0.2743.82, Edge 25.10586.0.0 and IE 11.545.10586.0

@os1r1s110

This comment has been minimized.

Copy link
Author

os1r1s110 commented Aug 11, 2016

Tried the "backface-visibility: hidden" trick but it didn't work.

@cvrebert cvrebert changed the title Fixed items flickering on Edge - IE when having focus Fixed items flickering on Edge+IE when having focus Aug 11, 2016

@cvrebert cvrebert changed the title Fixed items flickering on Edge+IE when having focus position:fixed focused button flickers on Edge+IE when scrolling Aug 11, 2016

@os1r1s110

This comment has been minimized.

Copy link
Author

os1r1s110 commented Aug 12, 2016

Quick observation, if I use the same button but I put it in a < div > instead of a < button > tag, the problem goes away, so the issue really is related to the use of < button > tag in IE / Edge...

Maybe it's not related to Bootstrap I'll try to dig deeper to see if it's a combination of styles from btn or btn-* along with from user agent.

@cvrebert cvrebert added the confirmed label Sep 5, 2016

@cvrebert cvrebert added this to the v4.0.0-alpha.5 milestone Sep 6, 2016

@cvrebert

This comment has been minimized.

@cvrebert cvrebert closed this in 34291cc Sep 6, 2016

krissihall pushed a commit to krissihall/bootstrap that referenced this issue Sep 7, 2016

Hall, Kristina Hall, Kristina
Merge branch 'v4-dev' of https://github.com/twbs/bootstrap into v4.0.…
…0_aeo-bootstrap

* 'v4-dev' of https://github.com/twbs/bootstrap: (860 commits)
  Update Bower url (HTTP to HTTPS) (twbs#20658)
  Add Edge entry for twbs#20507 to Wall of Browser Bugs
  Move Sauce credentials out of .travis.yml
  new hashes
  grunt
  versions
  grunt
  Fixes twbs#20608 and twbs#20578: Consistent checkbox and radio markup (twbs#20629)
  Disable important flag on Sass linter (twbs#20627)
  Fixes twbs#20619: Add important to the hover/focus as well (twbs#20626)
  grunt
  Fix segmented buttons in input group docs (twbs#20489)
  Renamed contextual classes for tables (twbs#20505)
  Make .card class inside .card-columns display: block too (twbs#20447)
  grunt
  Remove unused $variables in grid mixins (twbs#20597)
  fixes twbs#20485: use rem units in alert dismiss (twbs#20625)
  Fix README badge alignment.
  Update ads code and styles (also fixes twbs#20477 in different way)
  Fixes twbs#20504: Mention .divider to .dropdown-divider name change
  ...
@Tix1981

This comment has been minimized.

Copy link

Tix1981 commented Apr 4, 2017

I solved this trough css:

a:focus {outline:none}

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Apr 4, 2017

@Tix1981 That's not a good fix. See http://www.outlinenone.com

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.