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

"Samsung Internet" seems to ignore the bottom:0 and places the button on the top border. (see the images below)

How it should look

How it looks on Samsung Internet

Website: sugargang.com;

Note: the issue only appears on real Samsung devices using "Samsung Internet". Installing the "Samsung Internet"-browser on any other device, seems to work fine. Using any other browser on a Samsung device, also has no issue rendering.

Code (don't mind the {{liquid code}}, its just a template language) :

<section  style="margin-top: 0px; margin-bottom: 20px;">
  <span  style="position: relative;">
    {% render 'full_width_image' , mobile_image: hero_mobile %} <!-- liquid code: just places a  img -->
    <div ></div>
    <a href="{{ section.settings.link_1 }}"  style="position: absolute; bottom: 0;">{{ section.settings.button_text_1 | escape }}</a>
       <a href="{{ section.settings.link_seconary }}"  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. -->

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

CodePudding user response：

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  style="margin-top: 0px; margin-bottom: 20px;">
      <span  style="position: relative;width: 100%;height: 100%;display: block;">
        {% render 'full_width_image' , mobile_image: hero_mobile %} <!-- liquid code: just places a  img -->
        <div ></div>
        <a href="{{ section.settings.link_1 }}"  style="position: absolute; bottom: 0;">{{ section.settings.button_text_1 | escape }}</a>
           <a href="{{ section.settings.link_seconary }}"  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. -->