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 native iOS app with a webview to display web content.
I have a fixed header in my app with the following properties:
#header {
height: 60px;
background-color: #mainColor;
color: #ffffff;
padding: 10px;
text-align: center;
position: fixed;
width: 100%;
z-index: 1;
}
Before I upgraded to iOS 11 everything worked fine. Now when I scroll down/up the header disappears during the scroll, and when the scroll is done, the header appears again.
This can also be reproduced in Xcode 8.
I'm just writing some code, try with one by one
Try with below
self.automaticallyAdjustsScrollViewInsets = false
Try with below
[self.webView.scrollView setContentInsetAdjustmentBehavior:UIScrollViewContentInsetAdjustmentNever];
Try with below (change your code)
header {
height: 60px;
background-color: #mainColor;
color: #ffffff;
padding: 10px;
text-align: center;
position: fixed;
width: 100%;
z-index: 1;
transform: translateZ(0);
-moz-transform: translatez(0);
-ms-transform: translatez(0);
-o-transform: translatez(0);
-webkit-transform: translateZ(0);
-webkit-font-smoothing: antialiased;
}
And some helpful links might be useful for you!
http://ayogo.com/blog/ios11-viewport/
https://forums.developer.apple.com/thread/90472
How to fix the iOS 11 input element in fixed modals bug
https://github.com/PierBover/ios-iframe-fix
https://stanko.github.io/ios-safari-scoll-position-fixed/
From Apple official note:
Important:
Starting in iOS 8.0 and OS X 10.10, use WKWebView to add web content to your app. Do not use UIWebView or WebView.
So you should try once with WKWebView.
position: fixed has always been a problem with iOS. It seems that in every version of iOS the problem persists. Now, I couldn't find anything regarding the change of behaviour of your application from iOS 10 to 11, you could consider reporting this as a bug; on the other hand having seen the multitudes of people who encountered this problem and the fact that affects more or less all the recents versions of iOS I would suggest not to use position: fixed.
The most common workaround is transform: translateZ(0), this not only works on iOS and prevent any possible flickering, it also forces the browser to use hardware acceleration to access the GPU to make pixels fly. It should work also without the prefix -webkit- from iOS 9.
I had this very similar issue with a Cordova project built for iOS, which uses a webview. Cordova uses the UIWebView by default as its webview engine and I tried all the possible fixes mentioned in this thread and many others. Finally our only solution was to change the webview engine from UIWebView to WKWebView (https://developer.apple.com/documentation/webkit/wkwebview). With Cordova, introducing the WKWebView is pretty straightforward with a plugin https://github.com/apache/cordova-plugin-wkwebview-engine
After introducing WKWebView and dealing with some of the issues it causes we are no longer experiencing the flickering or disappearing fixed positioned elements while scrolling in iOS 11.
We had the similar issue and it got fixed with below 2 plugins
https://github.com/apache/cordova-plugin-wkwebview-engine
https://github.com/TheMattRay/cordova-plugin-wkwebviewxhrfix
First plugin will change default WebView to WKWebView and second plugin provide fix for CORS issue that we see for using WKWebView.
The trick is to force GPU acceleration. Do this by adding translate3d to the #header element.
transform: translate3d(0,0,0);
If elements nested inside the #header element continue to disappear add translate3d to them as well.
Position fixed doesn't work well with iOS, but I used position absolute in my cordova apps which never causes any issue for me.
You may have already seen this post on some changes in iOS 11, but if not maybe it would apply to your situation?
One of the viewport-fit: contain/cover/auto options?
Or changing your code to use a constant value for the padding-top?
Did you try to use position:sticky instead of position:fixed?
In past it works really well on iOS.
Please make note that is position:sticky requered rule top to be defined.
So final solution in your case should be:
#header {
height: 60px;
background-color: #mainColor;
color: #ffffff;
padding: 10px;
text-align: center;
position: -webkit-sticky;
position: sticky;
top: 0;
width: 100%;
z-index: 1;
}
Also if you need extra offset from top you could adjust top:0; rule from zero to any number in px.
And one more final note: that is sticky element will not extract element from document flow and will act as ordinary document element (like div with position:static or relative), but not like absolute positioned element (in case of fixed or absolute).
http://caniuse.com/#feat=css-sticky
I have been battling against this very same problem myself.
The issue (at least as manifested in the app I am working on) only seems to happen on screens which are a combination of tall (in that they require a good deal of scrolling) and fairly complex.
Generally, at least for me, the problem only seems to really manifest when momentum scrolling kicks in.
Although there's one screen in particular, which contains 15 left-right-scrollable rows of images, that will break the head/footer no matter how slowly you scroll it.
In my own defense... I had absolutely nothing to do with the design. :-)
At any rate...
After much searching an experimentation, I have managed to come up with a "solution" of sorts.
Mind you, I'm not claiming this is the way to go here. But perhaps someone with more experience than I have in the mobile app space, can take this information and extrapolate something less sucky from it.
The first piece looks like this:
html,
body {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
-webkit-overflow-scrolling: auto;
}
And then for the container that acts as the main body of your screen:
.main-content-area {
overflow-y: auto;
height: 100%;
}
This is going to kill momentum scrolling for your app. Which is not great, I know. But as a result of curtailing the user's ability to scroll very quickly, screen rendering seems to be able to keep up and the problem goes away.
Again, I'm not recommending this as a viable solution for production. Because it's obviously not great.
I'm offering this up more as a possible stepping-stone to a real solution, in the hopes that it helps.
===>>> UPDATE:
I have a working solution. But, as others before me have pointed out, I had to avoid the use of Fixed Positioning.
Instead, I used Absolute Positioning to define Header, Footer and Main Content sections of the page. Then allowed scrolling only in the Main Content section.
If it helps, I have the POC I put together available on BitBucket
this works for me
position: sticky
I had this same issue with both position:fixed and position:sticky. Chaging from UIWebView to WKWebView fixed it for me:
#import <WebKit/WebKit.h>
....
#property (weak, nonatomic) IBOutlet WKWebView *myWebView;
"Starting in iOS 8.0 and OS X 10.10, use WKWebView to add web content to your app. Do not use UIWebView or WebView."
https://developer.apple.com/documentation/webkit/wkwebview
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.
Just discovered this earlier, in an attempt to use CSS3 to create a navigation toggle with 3 horizontal bars, like so:
Here's my CSS:
.toggle button:after {
content: '';
position: absolute;
width: 68%;
height: 4px;
background: #fff;
top: 8px;
left: 17%;
box-shadow:
0 10px 0 #fff,
0 20px 0 #fff;
}
Looks perfectly fine on computers, but on iOS the two bottom bars (generated by the box-shadow don't display at all. If I delete the second rule, I see two bars (so the property works in this instance). But it seems like iOS doesn't like having two box-shadows?
Does anyone have a workaround for this, other than completely re-approaching how I'm creating a navigation toggle (like using font-awesome or an image)?
You can use 'border-radius:1px' to help you solve your issue.
I'm trying to prevent my button from flashing blue after clicking, anyone know what class causes this change? so I can override it
Cheers!
For anyone landing here and wondering what to do with .ui-btn-active, I'd like to build on sqlisers answer with:
.ui-btn-active
{
color: #2F3E46 !important;
background: none !important;
background-color: #eee !important;
text-shadow: 0 /*{a-bup-shadow-x}*/
1px /*{a-bup-shadow-y}*/
0 /*{a-bup-shadow-radius}*/
#ffffff /*{a-bup-shadow-color}*/;
}
Just change the color values to whatever you like.
If this happens on your mobile, I'd suggest adding this to your stylesheet:
* {
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
This will remove the default tap-highlight function of the webkit browser (on any mobile). Seems to work mostly on Android phones, but it does have affect on iOS devices as well.
The class you're looking for is
.ui-btn-active