I'm using Tailwind CSS and React.
I've tried about everything under the sun to try and remove this blue outline from my <a>-elements in my page;
This blue outline keeps appearing whenever I chose a menupoint and refresh
My immediate thoughts came to :focus on the a-elements, so I've tried the following:
.tabList {
#apply mx-5 flex flex-row py-2;
a {
&:focus {
outline: transparent !important;
border: transparent !important;
box-shadow: 0 0 0 0 rgb(0 0 0 / 0%) !important;
-webkit-touch-callout: none;
user-select: none;
}
&:focus-within {
outline: transparent !important;
border: transparent !important;
box-shadow: 0 0 0 0 rgb(0 0 0 / 0%) !important;
-webkit-touch-callout: none;
user-select: none;
}
&:focus-visible {
outline: transparent !important;
border: transparent !important;
box-shadow: 0 0 0 0 rgb(0 0 0 / 0%) !important;
-webkit-touch-callout: none;
user-select: none;
}
}
}
I've tried about every focus pseudoclass I can think off to try and target iOS, to no avail. Thing is, everything works just fine and I can actually manipulate and remove the border on my local machine (using ngrok to cast the developement port to my iOS device) and it doesn't come back. But whenever I push the same code to development and production, the blue outline keeps coming back. I even tried making the outline a different color (it worked) and iOS is still forcing the thick blue outline over my custom color outline.
I can't think of any relevant -webkit- css-classes I can use either. Many are deprecated or just plain won't work.
Here's a snippet of the actual TSX:
<Tab.Group selectedIndex={getIndexOfSelecetedTopMenuItem(state)}>
<Tab.List className={styles.tabList}> // Actual class
{getToplevelMenuItems(state).map((item) => (
<Tab as="div" key={item.menuItemId} className="basis-1/3">
<ButtonTopCategory navigationModelUpdater={navigationModelUpdater} menuItem={item} />
</Tab>
))}
</Tab.List>
I'm of course keeping accessability in mind, but right now the blue outline is just plain interfering with the design of the page;
Choosing a different (I've chosen the second point here) menupoint still keeps the first on in focus even after refreshing the page
If anybody has experiences with this (I've Googled my ass off), help would be appreciated. Thanks!
I've tried several tested and tried methods to no avail; removing the outline (setting the value to 0 or none), making it transparent, changing the color (iOS forces the blue on it anyways), setting tabIndex prop to 0 or -1..
I expected the blue outline to go away when chosing 0 or none.
UPDATE UPDATE UPDATE
It turns out I was slaying the beast with the wrong tools. I'm using HeadlessUI for the tabs rendering, and it turns out I can use Tailwind CSS to apply styling conditionally. Whenever the tab was selected, I noticed the state of the Tab-component changed to "selected".
I looked up the Headless-UI docs and it turns out you can change the styling when the state changes. I applied "outline-none" as following to the Tab component;
<Tab as="div" key={item.menuItemId} className={"ui-selected: basis-1/3 outline-none"}>
Reference:
https://headlessui.com/react/tabs#using-data-attributes
Turns out the state was overriding the manual CSS!
I’m posting your work-around as an answer.
You should not do this without providing a reliable way to render Focus visible
It turns out I was slaying the beast with the wrong tools. I'm using HeadlessUI for the tabs rendering, and it turns out I can use Tailwind CSS to apply styling conditionally. Whenever the tab was selected, I noticed the state of the Tab-component changed to selected.
I looked up the Headless-UI docs and it turns out you can change the styling when the state changes. I applied outline-none as following to the Tab component;
<Tab as="div" key={item.menuItemId} className={"ui-selected: basis-1/3 outline-none"}>
Turns out the state was overriding the manual CSS!
I have a div styled to truncate centered text with an ellipsis, with some padding on each side. It works when using a desktop browser, but on iPad the text seems to ignore the right padding and becomes centered incorrectly.
I'm using this for the styling:
div {
text-overflow: ellipsis;
width: 120px;
padding: 0 38px;
overflow: hidden;
white-space: nowrap;
border: 1px solid black;
text-align: center;
}
An example can be seen here. View on iPad to see the problem. http://jsfiddle.net/35Lyk9yp/
I'm thinking this might be some bug with the mobile browsers? It didn't work on iOS Safari or Chrome, but it's ok on Windows Safari and Chrome and Firefox. Is there a simple workaround for it?
Edit:
I found a workaround by using an inner div with the content that I used to do the ellipsis, and then used the outer div to set the padding. If there is a way around it with one element though, please let me know.
In order to get your code to work you need to have CSS overflow, width and display.
You are probably missing the display.
I'm trying to get custom jQuery mobile navbar icons and it's not working. I know the question has been asked before and I think I am doing it right can someone look at my code and see if they can see the problem please.
.ui-icon-directions {
background-image:url("http://c9.io/mbochicchio/tradingpost/workspace/img/mobilephotos/directions.png") 50% 50% no-repeat;
background-size: 20px 20px;
box-shadow: none;
-webkit-box-shadow: none;
margin: 0 !important;
}
http://jsfiddle.net/ragingnomad/NHC9p/5/
In jQM 1.4.x, background image is applied to the :after pseudo-selector:
.ui-icon-directions:after {
background-image:url("http://c9.io/mbochicchio/tradingpost/workspace/img/mobilephotos/directions.png");
}
Here is your updated FIDDLE
I've found what seems to be a bug in WebKit for iOS 7, but only on iPad 3 and 4, which leeds me to believe it's somehow hardware-related.
The bug: If I add the spread value (the fourth value) to CSS box shadows the whole shadow disappears. I've put up an exampel here.
Can anyone else confirm this error on iPad 3 and 4 with iOS 7?
Still an issue in IOS 7.0.4.
Add a one pixel border radius to force the browser to render the shadow in landscape mode and while zooming.
border-radius: 1px;
We've found a good rule of thumb when dealing with safari and/or iPad issues (or both). Put the following rule on the element or class to force hardware rendering.
transform: translate3d(0,0,0);
This solved my problem getting a shadow (used as a border with the spread value) to render on an iPad the same as other devices.
It is even more strange i was looking into the exact same problem.
If you use inset you can define your spread and then it is working fine!
an other fine fact is that your dropshadow will be gone as you turn your ipad into landscape mode.
This is a quite annoying bug!
I had a similar issue on iPad mini w/ iOs 7.0.3
the problem appeared both in safari and in chrome
input field with inset box shadow didn't appear at all regardless the zoom
div drop shadow appeared, but when zoomed in changed to a line and further zoom in hide the line as well.
I found on another thread this solution:
"Try adding -webkit-appearance: none;, because iOS tends to mess up forms."
and it solved the problems !
Something similar here. Applied box-shadow to image elements. It shows fine at zoom=1. But if you zoom in, it disappears on iPad 3 with iOS 7.
CSS Code used:
#photostrip > img {
-webkit-box-shadow: 0px 6px 8px rgba(0,0,0,0.33);
-moz-box-shadow: 0px 6px 8px rgba(0,0,0,0.33);
box-shadow: 0px 6px 8px rgba(0,0,0,0.33);
}
Same issue with iPad Air / iOS 7 :(
Setting -webkit-appearance didn't help, neither did border-radius.
I used the following CSS to fix it (it lets you use the spread setting on other browsers, and overrides for webkit/iOS only):
.box_shadowed
{
box-shadow: 2px 2px 4px 2px #ccc;
-webkit-box-shadow: 2px 2px 4px #ccc;
}
I had the same issue on iPad 4 with iOS7. When I set CSS box shadow for an element it appears as intended on iPad portrait view. But when I rotate the iPad to landscape view the box shadow gets disappear.
I tried StrandedPirate's solution - adding 1px border radius to the element and it worked! This solution might not be applicable for all cases, but for my case it is adoptable.
I had the same problem and added border-radius:1px to fix it.
I was using:
border-radius: 100%;
box-shadow: 0 0 0 20000px rgba(255,255,255, .6);
and the shadow wasn't appearing on iPad(iOS 11): Safari and Chrome.
I tried all the other answers but with no luck.
The solution for me was to reduce the spread from 20000px to 922px. This was the max value that I could use so the shadow would appear.
One single rule didn't helped in my case.
At the end I fixed adding ALL these rules:
-webkit-appearance: none;
border:0;
border-radius: 1px;
height: 1px;
In particular setting also the height.
On my website I have a list of products wrapped in a a link with display:block so the whole product and its details are clickable.
The a link doesnt have a hover background-colour but it has an active background-colour so the bg colour changes someone clicks on the link..
The problem I have is on my iPhone, when I scroll, the a link's background colour changes to the active state's bg colour. Its very annoying when items background colour changes while scrolling through the products. Why is that? Whats the best way to stop it from happening and still change the background-colour once clicked on iOS? Am I the ONLY one who got this problem??
Please let me know if you need a jsfiddle. Thanks a lot
The way I have done it in my app is to explicitly mention all the states so there is no ambiguity. My CSS kinda looks like this -
a:link {
text-decoration: none;
color: black;
-webkit-tap-highlight-color: #ffcc99;
}
a:visited {
text-decoration: none;
color: black;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
a:hover { //technically not required to mention hover
color:black;
}
a:active {
color:grey;
}