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;
}
Related
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'm working on a simple tic-tac-toe application and building it in CodePen. When the user loses or forces a draw (designed to be unbeatable), a jquery UI dialog box pops up informing the user of said result. Issue I'm having, is that when this happens, a large empty space appears causing a scroll bar to appear at the right of the page. This is a small detail - but I'd like to fix. I cannot put overflow: hidden on the body because then users won't be able to scroll on small screens or in resized browser windows. I've already tried the following to no avail:
adjusting position of dialog to very top of screen
putting overflow: hidden rule just on .ui-dialog
adjusting the height of the dialog box
adjusting the margin-bottom of .ui-dialog
messing with other dialog options to see if they were the cause
Some of these seemed far-fetched but I wanted to try everything I could think of before coming here. Research has turned nothing up either. I'm running Chrome and the pen in question can be found here: http://codepen.io/no_stack_dub_sack/pen/YGNRxO.
Any help on this would be much appreciated! Thanks in advance.
Again, this is a small detail, but since the app fits all on one page without scroll on most screens, I'd like to keep it looking as clean as possible.
Here's the code:
// DIALOG BOXES
$('body').append('<div id="draw" class="gameOver"><p>It\'s a Draw!</p></div>');
$('body').append('<div id="loser" class="gameOver"><p>You Lose!</p></div>');
$('.gameOver').dialog({
autoOpen: false,
resizable: false,
height: 120,
dialogClass: 'no-close',
buttons: {
'Play Again?': function() {
$('.gameOver').dialog('close');
setNewGame();
}
}
});
Somewhere in the dialog creation process, the position is set to relative on your dialog, which causes the height of your game to calculate the dialog, which gives the empty gap. You can simply set ui-dialog position to absolute in the css, and it'll solve the problem:
.ui-dialog {
position: absolute;
box-shadow: 1px 1px 30px 5px;
background: #04A777;
border-radius: 10px;
outline: none;
overflow: hidden;
margin-top: none;
}
http://codepen.io/anon/pen/EgmoGZ
First off, this is not a clone of: iPad/iPhone hover problem causes the user to double click a link
because I want an answer that is purely CSS. All of the answers in this link require js or jQuery and the one CSS answer involves background images. I'm trying to change the opacity and that's it.
CSS wants to gear itself towards the mobile revolution yet every solution I see for a simple 'touchDown'(aka touch-hover) creating a hover effect requires javascript or jQuery.
Here's some simple code to illustrate what I mean:
.btn {
border-radius: 5px;
display: block;
opacity: 1; <--from
background: red;
text-align: center;
line-height: 40px;
font-weight: bold;
&:hover {
opacity:.7; <--to
transition: opacity .2s ease-out; <--fun fade animation :)
-moz-transition: opacity .2s ease-out;
-webkit-transition: opacity .2s ease-out;
-o-transition: opacity .2s ease-out;
}
}
Tested in Chrome & Safari
iOS will not trigger a link click event on the first tap if the :hover state either:
Has a CSS transition animation
Reveals child content (such as a submenu, tooltip or ::before/::after element)
In both cases the first tap will trigger the :hover state and a second tap will trigger the link (or click event).
If you remove the animation or the child elements you should get it to trigger within a single tap.
This great article from CSS Tricks digs a bit deeper into the issue:
The Annoying Mobile Double-Tap Link Issue
TL;DR: don't rely on hover to reveal things
From the source recommended in #ihodonald's answer also simply recommends not using hover at all:
It’s probably best to just not rely on hover to reveal anything. The tech to work around it isn’t quite there yet.
And from Trend Walton's article:
Ultimately, I think seeing hover states fade away will make the web a better place. There never has been any substitute for concise content, clear interaction, and simple design. If we focus on core elements that make browsing the web great, our sites will function properly no matter how people use them.
Use the touchstart event instead of click on touchscreen devices. This example fixes the issue for iPhone and iPad.
if (
navigator.userAgent.match(/iPhone/i) ||
navigator.userAgent.match(/iPod/i)
) {
// iPhone double-click polyfill
$(document).on("touchstart", ".btn-that-does-something", function (e) {
e.preventDefault();
doSomething(this);
});
$(document).on("click", ".btn-that-does-something", function (e) {
// no-op
e.preventDefault();
});
} else {
$(document).on("click", ".btn-that-does-something", function (e) {
e.preventDefault();
doSomething(this);
});
}
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'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