androidhtmlcssbrowsersamsung-mobile

Absolute positioning on Samsung Internet

It seems that Samsung Internet browser has trouble with absolute positioning. We are currently using position: absolute; bottom: 0; inside of a relative positioned span. (I want to place a button on top of an image).

Layout that I want

But Samsung Internet browser seems to ignore the bottom: 0 and places the button on the top border. Like this:

Layout on Samsung Internet browser

Website: sugargang.com;

Note: the issue only appears on physical Samsung devices using Samsung Internet browser. It works on any other devices (with the same or any other browser.

This is my code (don't mind the {{liquid code}}, it's just a template language):

<section class="mobile-only" style="margin-top: 0px; margin-bottom: 20px;">
  <span class="" style="position: relative;">
    {% render 'full_width_image' , mobile_image: hero_mobile %} <!-- liquid code: just places a  img -->
    <div class="gradiant-overlay-hero"></div>
    <a href="{{ section.settings.link_1 }}" class="primary-button button mobile_button_hero" style="position: absolute; bottom: 0;">{{ section.settings.button_text_1 | escape }}</a>
       <a href="{{ section.settings.link_seconary }}" class="primary-secondary
         button mobile_button_hero mobile-only" style="position: absolute; bottom: 4em; background-color: {{ section.settings.color_seconary }}; box-shadow: none; color: white; border: 1px solid {{ section.settings.color_seconary }}; border-radius: 6px; box-shadow: #efefef 0px 8px 24px;">{{ section.settings.button_text_secondary | escape }}</a>
  </span>
</section>

<style>
  .gradiant-overlay-hero{
    position: absolute;
    bottom:0;
    left:0;
    right:0;
    width: 100vw;
    height: 100px;
    background: rgb({{ settings.background | color_extract: 'red' }} ,{{ settings.background | color_extract: 'green' }} ,{{ settings.background | color_extract: 'blue' }} );
    background: -moz-linear-gradient(0deg, rgba({{ settings.background | color_extract: 'red' }} ,{{ settings.background | color_extract: 'green' }} ,{{ settings.background | color_extract: 'blue' }} ,1) 0%, rgba({{ settings.background | color_extract: 'red' }} ,{{ settings.background | color_extract: 'green' }} ,{{ settings.background | color_extract: 'blue' }} ,0) 100%);
    background: -webkit-linear-gradient(0deg, rgba({{ settings.background | color_extract: 'red' }} ,{{ settings.background | color_extract: 'green' }} ,{{ settings.background | color_extract: 'blue' }} ,1) 0%, rgba({{ settings.background | color_extract: 'red' }} ,{{ settings.background | color_extract: 'green' }} ,{{ settings.background | color_extract: 'blue' }} ,0) 100%);
    background: linear-gradient(0deg, rgba({{ settings.background | color_extract: 'red' }} ,{{ settings.background | color_extract: 'green' }} ,{{ settings.background | color_extract: 'blue' }} ,1) 0%, rgba({{ settings.background | color_extract: 'red' }} ,{{ settings.background | color_extract: 'green' }} ,{{ settings.background | color_extract: 'blue' }} ,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#020024",endColorstr="#020024",GradientType=1);
  }
.mobile_button_hero {
    position: absolute;
    bottom: 10px;
    left: 50vw;
    transform: translate(-50%,50%);
    width:70vw;
  }
</style>

Thanks a lot! (and sorry for my english grammar)

Solution

  • Try this it looks problems due to the position relative on the span tag and it's not taking the height and width 100% due to a inline element.

    <section class="mobile-only" style="margin-top: 0px; margin-bottom: 20px;">
      <span class="" style="position: relative;width: 100%;height: 100%;display: block;">
        {% render 'full_width_image' , mobile_image: hero_mobile %} <!-- liquid code: just places a  img -->
        <div class="gradiant-overlay-hero"></div>
        <a href="{{ section.settings.link_1 }}" class="primary-button button mobile_button_hero" style="position: absolute; bottom: 0;">{{ section.settings.button_text_1 | escape }}</a>
           <a href="{{ section.settings.link_seconary }}" class="primary-secondary
             button mobile_button_hero mobile-only" style="position: absolute; bottom: 4em; background-color: {{ section.settings.color_seconary }}; box-shadow: none; color: white; border: 1px solid {{ section.settings.color_seconary }}; border-radius: 6px; box-shadow: #efefef 0px 8px 24px;">{{ section.settings.button_text_secondary | escape }}</a>
      </span>
    </section>
    
    <style>
      .gradiant-overlay-hero{
        position: absolute;
        bottom:0;
        left:0;
        right:0;
        width: 100vw;
        height: 100px;
        background: rgb({{ settings.background | color_extract: 'red' }} ,{{ settings.background | color_extract: 'green' }} ,{{ settings.background | color_extract: 'blue' }} );
        background: -moz-linear-gradient(0deg, rgba({{ settings.background | color_extract: 'red' }} ,{{ settings.background | color_extract: 'green' }} ,{{ settings.background | color_extract: 'blue' }} ,1) 0%, rgba({{ settings.background | color_extract: 'red' }} ,{{ settings.background | color_extract: 'green' }} ,{{ settings.background | color_extract: 'blue' }} ,0) 100%);
        background: -webkit-linear-gradient(0deg, rgba({{ settings.background | color_extract: 'red' }} ,{{ settings.background | color_extract: 'green' }} ,{{ settings.background | color_extract: 'blue' }} ,1) 0%, rgba({{ settings.background | color_extract: 'red' }} ,{{ settings.background | color_extract: 'green' }} ,{{ settings.background | color_extract: 'blue' }} ,0) 100%);
        background: linear-gradient(0deg, rgba({{ settings.background | color_extract: 'red' }} ,{{ settings.background | color_extract: 'green' }} ,{{ settings.background | color_extract: 'blue' }} ,1) 0%, rgba({{ settings.background | color_extract: 'red' }} ,{{ settings.background | color_extract: 'green' }} ,{{ settings.background | color_extract: 'blue' }} ,0) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#020024",endColorstr="#020024",GradientType=1);
      }
    .mobile_button_hero {
        position: absolute;
        bottom: 10px;
        left: 50vw;
        transform: translate(-50%,50%);
        width:70vw;
      }
    </style>
    <!-- other classes are mainly for styling colors- padding etc. -->