Category Archives: Responsive

Links remain in :hover state after clicking browser Back button on mobile devices

by ,

When using Mobile Safari (iOS) on iPads and iPhones or Chrome Mobile on Android devices, when you touch a button or hyperlink, it will trigger the “hover” state. If you have a CSS declaration that targets this pseudo class, this style may be active or visible if you tap the button/hyperlink and then tap the Back button in the browser. This is most likely not the desired state that you are looking for especially if your :hover declaration was intended for desktop browsers only. The reason why this happens is because when you tap on the back button, a request to the server is not sent, therefore the page that is in the cache gets reloaded along with the unintended hover state applied to your button or hyperlink.

Below is the sample HTML and CSS:

HTML


<a href="#" id="button">Button 1</a>

CSS


a {
   display: inline-block;
   width: 200px;
   font-size: 1em;
   font-weight: bold;
   border-radius: 5px;
   text-align: center;
   margin-bottom: 25px;
   line-height: 2em;
   text-decoration: none;
}

a:link,
a:no-touch:hover {
   background-color: green;
   color: white;
}

a:hover {
   background-color: white;
   color: green;
   border: 1px solid green;
}

Here are our buttons in the linked and hover states, respectively.

buttons_post5

When tapping on the Back button on a mobile browser, the button with white background with green font would be active and not the button with green background and white font.

Solution

To fix this you can set up a script to detect the device using the ID of the button and the userAgent.match function, by passing Android, iPhone, or iPad arguments as seen below.

JavaScript


<script>
   var userAgent = window.navigator.userAgent;

   if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i) || userAgent(/Android/i)) {
      var button1 = document.getElementByID("button");

      button1.className += " no-touch";
   }    
</script>

This script adds a “no-touch” class to the className property of the anchor tag, which will then render as if the button is in it’s “linked” state. For more information on how to check User Agents for Mobile/Tablet, visit this post on stackoverflow, JavaScript how to check User Agent for Mobile/Tablet.

HTML figcaption size (width) too long – iPhone in portrait mode

by ,

I came across this issue when I was attempting to use an HTML <figcaption> element underneath an image on an iPhone 5s using Safari and Chrome. In portrait view, the font size of the caption does not change, even if explicitly setting a font size in CSS to a size. This may be due to the fact that browsers on an iPhone will automatically increase the size of small text. See the initial HTML and CSS below.

CSS


figcaption {
	font-style: italic;
        font-size: 0.5rem;
	text-align: right;
	margin-bottom: 25px;
}

HTML


<figure>
  <img src="http://image.jpg" />
  <figcaption>Photograph courtesy of John Smith, 
    <a href="http://www.website.com">www.website.com</a>
  </figcaption>
</figure>

With my font-size explicitly set to 0.5rem in CS, the figcaption pretty much takes up the entire width of page, when attempting to align it to the right at a smaller screen size in portrait mode.

In portrait view, the figcaption almost spans entire width of layout (not what we want).

In portrait mode, the figcaption almost spans entire width of layout (not what we want).

The figcaption in the landscape version (aligned to right and font-size relative to layout) is the desired outcome.

In landscape view, the figcaption looks just the way we want it to.

In landscape mode, the figcaption looks just the way we want it to.

Solution

It turns out that this happens because browsers on smartphones lays out the web page using a viewport that is wider than the device screen, unlike a desktop browser. Therefore using the -webkit-text-size-adjust property does the trick. After applying the property to our CSS, it should look like this below.

CSS


figcaption {
	font-style: italic;
        font-size: 0.5rem;
	text-align: right;
	margin-bottom: 25px;
        -webkit-text-size-adjust: 100%;
}

Be sure not to use “none” as the value for -webkit-text-size-adjust since it can affect how the text will be resized when using zoom in a browser. This would affect desktops as well. See the image below for how the figcaption now looks after adding this rule. Click on the image to see a larger version.

after adding -webkit-text-size-adjust property to our CSS, the figcaption renders the way we want it to (font-size) and now is aligned to the right

after adding -webkit-text-size-adjust property to our CSS, the figcaption renders the way we want it to (font-size) and now is aligned to the right