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.

Sign up for GitHub

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

Jump to bottom

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

Closed
lvmajor opened this issue Aug 11, 2016 · 5 comments
Closed

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

lvmajor opened this issue Aug 11, 2016 · 5 comments
Labels
browser-bug confirmed css v4
Milestone
v4.0.0-alpha.5

Comments

@lvmajor
Copy link

lvmajor 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
@lvmajor
Copy link
Author

lvmajor 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
@lvmajor
Copy link
Author

lvmajor commented Aug 12, 2016 •
edited
Loading

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 this to the v4.0.0-alpha.5 milestone Sep 6, 2016
@cvrebert
Copy link
Collaborator

cvrebert commented Sep 6, 2016

Filed MS Edge bug: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8770398/

krissihall pushed a commit to krissihall/bootstrap that referenced this issue Sep 7, 2016
Merge branch 'v4-dev' of https://github.com/twbs/bootstrap into v4.0.…
de829bb 
…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
Copy link

Tix1981 commented Apr 4, 2017

I solved this trough css:

a:focus {outline:none}

@cvrebert
Copy link
Collaborator

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
Assignees
No one assigned
Labels
browser-bug confirmed css v4
Projects
None yet
Milestone
v4.0.0-alpha.5
Development

No branches or pull requests
3 participants
@cvrebert @lvmajor @Tix1981