SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question linear-gradients not working on mobile devices

    Hello,
    I am writing a mobile web-app and I was wondering if someone could help me understand and fix these linear-gradients so that they work in both Safari-mobile and the Android-browser.

    I believe I am using every vendor-prefix properly and I even provide a fallback background-color, but whenever I view the app on a mobile device, the element whose background the gradients are applied to is transparent. In other words, the background is transparent and the gradients are not showing up on mobile devices. Meaning, even the fall-back colour is not working either.

    The even more weird thing is that they (the gradients) show up on the mobile simulators for android and iOS.

    Can someone please help me fix these gradients so they work on both desktop and mobile devices and also teach me how to do working fallback background-colors and background-images ?

    I would really appreciate any and all help!

    Thanks in Advance,
    Team 1504

  2. #2
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    whoops, I forgot to post the syntax that I have so far:

    Code:
    background:#fff;
    			background:transparent -ms-linear-gradient(top, rgba(255,255,255,.65), rgba(255,255,255,.9));
    			background:transparent url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIwLjY1Ii8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIwLjkiLz4KICAgPC9saW5lYXJHcmFkaWVudD4KCjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJ1cmwoI2hhdDApIiAvPgo8L3N2Zz4=);
    			background:transparent -o-linear-gradient(90deg, rgba(255,255,255,.65) 0%, rgba(255,255,255,.9) 100%);
    			background:transparent -moz-linear-gradient(90deg, rgba(255,255,255,.65) 0%, rgba(255,255,255,.9) 100%);
    			background:transparent -webkit-gradient(linear, 0%, 0%, 0%, 100%, from(rgba(255,255,255,.65), to(rgba(255,255,255,.9));
    			background:transparent -webkit-linear-gradient(90deg, rgba(255,255,255,.65) 0%, rgba(255,255,255,.9) 100%);
    			background:transparent linear-gradient(90deg, rgba(255,255,255,.65) 0%, rgba(255,255,255,.9) 100%);


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •