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

focus ring of image map within modal gets displayed in wrong place in Chrome #16180

Closed
adityashankert opened this issue Mar 30, 2015 · 15 comments · Fixed by #16262
Closed

focus ring of image map within modal gets displayed in wrong place in Chrome #16180

adityashankert opened this issue Mar 30, 2015 · 15 comments · Fixed by #16262
Labels
browser-bug confirmed css
Milestone
v3.3.5

Comments

@adityashankert
Copy link

if i click on image map then the border should be surrounding the image map area but if the image map is on modal the border is getting displayed at different place.

http://jsbin.com/meyejikife/1/edit?html,output -- image map on modal
http://jsbin.com/xekupejite/2/edit?html,output -- image map on normal page

browser - chrome
os - centos
@twbs-lmvtfy
Copy link

Hi @adityashankert!

You appear to have posted a live example (http://jsbin.com/henuyoliyi/1/edit), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:

  • line 29, column 97: Element area is missing required attribute alt.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

@twbs-lmvtfy
Copy link

Hi @adityashankert!

You appear to have posted a live example (http://jsbin.com/wofecilodo/1/edit), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:

  • line 15, column 97: Element area is missing required attribute alt.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

@cvrebert
Copy link
Collaborator

  • Please upgrade to Bootstrap v3.3.4
  • Please state which browser(s) and OS(es) you've experienced the problem on.

@cvrebert cvrebert mentioned this issue Mar 30, 2015
Closed
@adityashankert
Copy link
Author

@cvrebert added all the required details and upgraded bootstrap

@cvrebert
Copy link
Collaborator

Reposting to force revalidation: http://jsbin.com/meyejikife/1/edit?html,output

@twbs-lmvtfy
Copy link

Hi @cvrebert!

You appear to have posted a live example (http://jsbin.com/meyejikife/1/edit), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:

  • W002: <head> is missing X-UA-Compatible <meta> tag that disables old IE compatibility modes
  • W003: <head> is missing viewport <meta> tag that enables responsiveness

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

@cvrebert cvrebert added the css label Mar 30, 2015
@cvrebert
Copy link
Collaborator

cvrebert commented Apr 8, 2015

@adityashankert To clarify, when you say "border", are you referring to the :focus styling, specifically the difference between the locations of the circles in
good-regular
versus
bad-modal
?

@adityashankert
Copy link
Author

@cvrebert yes exactly

@cvrebert cvrebert changed the title image map border on modal getting displayed in wrong place focus ring of image map within modal gets displayed in wrong place in Chrome Apr 8, 2015
@cvrebert
Copy link
Collaborator

cvrebert commented Apr 8, 2015

This would appear to be a bug in WebKit/Blink.
Safari 8.0.4 also suffers from this bug.

@cvrebert
Copy link
Collaborator

cvrebert commented Apr 8, 2015

Tweaked the fiddle to get rid of the lint and combine the examples: http://jsbin.com/tufoye/1/edit

@cvrebert
Copy link
Collaborator

cvrebert commented Apr 8, 2015

Filed WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=143527

@cvrebert
Copy link
Collaborator

cvrebert commented Apr 8, 2015

Filed Chrome bug: https://code.google.com/p/chromium/issues/detail?id=475128

cvrebert added a commit that referenced this issue Apr 8, 2015
@cvrebert
Add Wall of Browser Bugs entries for #16180
70f4be6 
Closes #16180.
@cvrebert cvrebert mentioned this issue Apr 8, 2015
Merged
cvrebert added a commit that referenced this issue Apr 8, 2015
@cvrebert
Merge pull request #16262 from twbs/browser-bugs-16180
4127b25 
Add Wall of Browser Bugs entries for #16180
@cvrebert cvrebert added this to the v3.3.5 milestone Apr 8, 2015
@cvrebert cvrebert mentioned this issue Apr 8, 2015
Closed
@adityashankert
Copy link
Author

great man you guys rock !!

@bhanuprakash-rb
Copy link

good work guys.. thanks a lot

cvrebert added a commit that referenced this issue Jul 29, 2015
@cvrebert
http://wkbug.com/143527 got imported as rdar://problem/21908735
5e7c5a6 
Refs #16180
[skip sauce]
@cvrebert
Copy link
Collaborator

cvrebert commented Apr 9, 2016

Fixed in WebKit: http://trac.webkit.org/changeset/199247

cvrebert added a commit that referenced this issue Apr 9, 2016
@cvrebert
https://webkit.org/b/143527 has been fixed
62c07b6 
Refs #16180, #16262
[skip sauce]
cvrebert added a commit that referenced this issue Apr 9, 2016
@cvrebert
Port 62c07b6 to v3
82cd054 
https://webkit.org/b/143527 has been fixed

Refs #16180, #16262
[skip sauce]
@cvrebert cvrebert mentioned this issue May 20, 2016
Merged
cvrebert added a commit that referenced this issue May 20, 2016
@cvrebert
https://crbug.com/475128 has been fixed
8c525e5 
Remove its entry from the Wall of Browser Bugs.
Refs #16180

[skip sauce]
cvrebert added a commit that referenced this issue May 20, 2016
@cvrebert
https://crbug.com/475128 has been fixed (#19946)
83692b1 
Remove its entry from the Wall of Browser Bugs.
Refs #16180

[skip sauce]
cvrebert added a commit that referenced this issue May 28, 2016
@cvrebert
Port #19946 to v3
c25cd2f 
https://crbug.com/475128 has been fixed

Remove its entry from the Wall of Browser Bugs.
Refs #16180

[skip sauce]
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
Projects
None yet
Milestone
v3.3.5
Development

Successfully merging a pull request may close this issue.

Add Wall of Browser Bugs entries for #16180 twbs/bootstrap
4 participants
@cvrebert @adityashankert @twbs-lmvtfy @bhanuprakash-rb