Absolute positioning on Samsung Internet

Question

It seems that Samsung Inte.net browser has trouble with absolute positioning. We are currently using position: absolute; bottom: 0; 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 Inte.net browser seems to ignore the bottom: 0 and places the button on the top border. Like this:

Website: sugargang.com ;

---

Note: the issue only appears on physical Samsung devices using Samsung Inte.net 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)

Answer 1

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. -->