Reflection mask feature in Chrome for Android that uses Webkit technology

Chrome Reflection on Desktop Computers

By using Chrome on a desktop computer, I am able to create an image reflection with the following CSS code:

img {  
 -webkit-box-reflect: below 0 -webkit-gradient(
  linear, 
  left top, 
  left bottom, 
  from(transparent), 
  color-stop(.7, transparent), 
  to(white)
 );  
}

Issue with Android Chrome

Upon testing the reflection effect on Android's Chrome browser, I noticed that the mask does not function as intended. Instead of a true mask, it appears as a plain overlay gradient. How can I transform this into a genuine mask? My real website features a patterned background, making a plain overlay gradient unsuitable for gradually revealing the background.

androidcssgoogle-chrome

Answer №1

Unfortunately, the Android browser does not have support for webkit gradients as masks on box-reflects. However, a workaround is to use PNG masks. To avoid making an additional HTTP request, you can encode the PNG masks as Base64 for use in a Data URI:

img {
  -webkit-box-reflect: below 0 
  url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAyCAYAAACUEBHwAAAAIklEQVQ4jWP8//8/AzpgwhAZFRwVHBUctIIsDAwMXFQWBAAW4QORoT0UUQAAAABJRU5ErkJggg==);
}

If you need to generate a PNG gradient, tools like can be helpful. You can then convert it to Base64 using a service like

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Scrolling triggers Navbar Hover for all links

Currently, I am utilizing a free html5 theme as a foundation for a website project, but I require assistance with the Navbar Hover function. If you wish to see the original html5 theme, you can visit The theme was initially designed as a one-page layout, ...

javascriptjquerycsshtml

How long does a typical Google Analytics session last for an Android mobile application?

It seems that the Android GA documentation can be a bit confusing. According to the Java API, the default timeout is set to 30 seconds. Here is the link to the Java API documentation However, in the same document, it states that ga_sessionTimeout is 180 ...

androidgoogle-analytics

Styling with CSS: How to Adjust Word Wrap in a Container that Resizes Dynam

I'm struggling to ensure that long lines of text break and wrap correctly within a chat feature I am developing. The crucial elements in question are .chat__messages__item and .chat__messages__body (these are all contained within a parent element set ...

css

Creating a series of tiny vertical markings along the horizontal line using the input range

I have a range input and I am looking to add small vertical lines at intervals of 10 on the horizontal line representing each default step. The range of my input is from 0 to 40 and I would like to have small vertical lines at 10, 20, and 30. I need to ac ...

javascripthtmlcssinputsalesforce-lightning

What adjustments can be made to the Bootstrap code to prevent it from causing layout issues with the Signin Form and Footer?

Recently, I've encountered some challenges with the footer formatting on my website's home page and the sign-in form on a separate page. It appears that the Bootstrap framework at the top of the page is affecting these elements exclusively. How c ...

htmlcssbootstrap-4frontend

Utilizing Webpack to emulate the @apply functionality of Tailwind CSS and shift away from using @extend in SASS

I am currently developing an internal CSS 'framework' / methodology that falls somewhere in between ITCSS and Tailwind. We heavily rely on utility classes, but sometimes the length of the actual class name becomes too much and we feel the need t ...

csswebpacksasstailwind-css

Creating a container that matches the dimensions of its neighboring container without using relative or absolute positioning

I am seeking a solution to make the ".on-the-left" container have the same size as the ".on-the-right" container, but without relying on relative or absolute positioning. Here is the visual outcome I am aiming for: https://jsfiddle.net/NicoZZZ/osbL16z9/28 ...

htmlcss

HTML4 section tag failing to generate columns in proper alignment

Currently, I am organizing a list of movies by decade using the article and section elements. An issue has arisen: the alignment between the second and third rows is perfect while the first row seems slightly off-kilter. Below is the code snippet in questi ...

csshtmlhtml4

Using Retrofit2 to display JSON data in a RecyclerView

I've been trying to use Retrofit2 to fetch JSON data and then parse it into my RecyclerView adapter without much success. Currently, I can populate one RecyclerView with local DBFlow data, but I'm struggling to do the same for the JSON data retri ...

javaandroidjsonretrofit2

Creating a customized design for a q-popup-edit

As I navigate through using Quasar in Vue, I stumbled upon a q-popup-edit that allows me to gather input from the user. Despite my attempts at researching via Google and reading documentation, I have hit a roadblock when it comes to customizing the style o ...

cssvue.jsquasar

Enhance Bootstrap modals by automatically adjusting the background shadow mask when resizing or changing the content within the modal window

Incorporated within my bootstrap modal window is a form alongside a link that triggers the jQuery functionality of .slideToggle(). By interacting with this link, a concealed div expands. Consequently, the size of the modal popover becomes fluid. Upon click ...

javascriptjquerycssruby-on-railstwitter-bootstrap

Inconsistent functionality of HTML5 BrightCove videos on Android devices

Encountered an issue with the Brightcove HTML5 video embedded on my website showing a black screen when clicked to play. The video plays sporadically and only on Android Devices (testing on KitKat only). In instances where it doesn't work, the templa ...

androidhtmlbrightcove

Creating a Dynamic System for Converting Numeric Digits to Alphabetical Grades

Utilizing the code provided below, you can calculate a user's grade point average ranging from A+ to E-. Is there a way, within the following fiddle, to not only display the GPA but also convert it into a corresponding letter grade from A+ to E-? Curr ...

javascriptjqueryhtmlcssdynamic

The Element should take up the entire page with the exception of a 20px margin

I am struggling to create an element that covers the entire page except for a 20px margin on all sides. I have tried implementing a solution using this code, which works in webkit browsers and Firefox but seems to have issues with Internet Explorer (10) an ...

css

The submission of the form is not functioning correctly when triggered by JavaScript using a button

My website was designed using a CSS/HTML framework that has been seamlessly integrated into an ASP.NET site. Within a ContentPlaceHolder, I have implemented a basic login form. The unique aspect is that I am utilizing the onclick event of an image to subm ...

javascriptasp.nethtmlcssforms

Adding padding with and without child elements

As I work on styling a basic menu, I'm struggling to find a solution for adding padding to list items so they all have a consistent look. The challenge arises from the fact that I have an unordered list where list items may or may not contain an anch ...

css

Issues with custom logo and menu/sidebar toggle on Wordpress

Hello everyone, I am currently facing some difficulties with my new WordPress blog that utilizes the Skilt-Theme. Specifically, I'm having trouble with the custom-logo and sidebar-toggle features. When there is no logo present, you can see the layout ...

csswordpressheadergraphical-logo

Issues with Image Loading in Azure WebMatrix

I am currently using WebMatrix to host my website, but I'm facing some issues with certain elements not loading correctly. Specifically, I have two pictures on my site that are linked to a directory on my local machine. I would like to know how I can ...

htmlcssazure

Using CSS Grid to Create Three Rows of Equal Height

I am facing an issue with my vertical menu that stretches 100% height. The rows inside this menu need to have equal height and be stretched to fit the container. Additionally, I noticed that adding a button seems to drop the container slightly below the pa ...

htmlcsstwitter-bootstrapmenu

What could be causing my buttons to not line up properly?

My buttons are refusing to line up horizontally for some unknown reason. I can't figure out what the issue is. They are all set to display as inline-block elements. The first image shows a website with the correctly aligned buttons, while the second o ...

htmlcss