display of bootstrap tabs not correcectly
Categories
(Core :: Layout, defect)
Tracking
()
People
(Reporter: joachim.schmidt, Unassigned)
Details
Attachments
(1 file)
|
165.17 KB,
image/jpeg
|
Details |
screen-shot.jpg
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:93.0) Gecko/20100101 Firefox/93.0
Steps to reproduce:
used bootstrap tabs with defined "border-bottom: 0". When clicking tab, tab content should display and tab should show bottom border as defined with css.
see ny webpage: http://www.jschmidt-systemberatung.de/index.php?option=com_content&view=article&id=308&Itemid=1213&lang=en
Actual results:
when tab is clicked, tab content displays correctly - but tab displays with bottom border though css defined "border-bottom: 0;" With second click into displayed page display will be corected. (bottom border on tab disapears)
Expected results:
checked with firefox on ios, safari on ios, MS-Edge on windows 10 and chrome on windows 10. All displays are correctly.
|
||
Comment 1•3 years ago
|
||
The Bugbug bot thinks this bug should belong to the 'Firefox::Tabbed Browser' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.
|
Reporter | |
Comment 2•3 years ago
|
||
this has nothing to do with firefox-tabs - the bug relates to the bootstap "tab" feature.
|
||
Comment 3•3 years ago
|
||
I can't reproduce this issue, I'm not seeing any bottom border when navigating through the site's tabs - all I see is a focus ring (verified using the latest Niglty 95.0a1 and Firefox 93 on macOS Big Sur 11.6 and Windows 10 x64). I'm going to set this to the Core: Layout component so that our developers could take a look at it.
|
|
Reporter | |
Comment 4•3 years ago
|
||
hi,
pls. have a look at: http://www.jschmidt-systemberatung.de/index.php?option=com_content&view=article&id=308&Itemid=1213&lang=en
Then click on tab: "Usage and possible Uses" (or one of the other tabs).
With Fireox v93 now a bottom border on the clicked tab is displayed - if you click into the page (anywhere) the bottom border disapears.
|
|
Reporter | |
Comment 5•3 years ago
|
||
|
||
Comment 6•3 years ago
|
||
That's not a bottom border. That's a focus outline. The page has:
a:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
So we're doing what the page is asking us to do... It seems Blink has a hack to not show auto outlines in that case. Test-case:
<!doctype html>
<style>
a:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
background-color: blue;
}
</style>
<a href="#10">Focus me</a>
But this is invalid. The page should use :focus-visible rather than :focus if it doesn't want outlines on mouse focus.
|
|
Reporter | |
Comment 7•3 years ago
|
||
hi,
thank you very much for your Info! I corrected my problem. What still puzzles me is that all the other (checked) browser obviously are doing wrong as they are not handling "outline" correctly.
regards,
Joachim
Description
•