Skip to content

[Bug] case-study.html and "Features 9" are not compatible with each other #194

@polds

Description

@polds

Version

3.0.4

Reproduction link

https://jsfiddle.net/nujbt8de/ - No CSS / JS, save locally

Operating System

At least macOS + Android

Device

mac book pro + Galaxy S23 Ultra

Browser & Version

Chrome 114.0.5735.133

Steps to reproduce

  1. Open pages/case-study.html in a text editor
  2. Below the header section copy and paste the example "Features 9" (from sections/page-sections/features.html) without any modification:
<section class="">
  <div class="container py-5">
    <div class="row align-items-center">
      <div class="col-md-6 mb-md-0 mb-4">
        <h3>Very nice subtitle</h3>
        <p class="lead mb-md-5 mb-4">
          Change the color to match your brand or vision, add your logo, choose the perfect thumbnail, remove the playbar, add controls and more.
        </p>
        <p><span class="me-2">&#9679;</span> Showcase and embed your work with</p>
        <p><span class="me-2">&#9679;</span> Publish across social channels in a click</p>
        <p><span class="me-2">&#9679;</span> Sell your videos worldwide</p>
        <p><span class="me-2">&#9679;</span> Make more profit</p>
      </div>
      <div class="col-md-6">
        <div class="blur-shadow-image text-center">
          <img src="../../assets/img/examples/blog2.jpg" alt="img-shadow" class="img-fluid shadow-xl border-radius-lg max-height-500">
        </div>
      </div>
    </div>
  </div>
</section>
  1. Save and refresh the page

What is expected?

What is shown in Features 9 is displayed, no other section on the page is affected by adding the section.

What is actually happening?

The image from Features 9 is somehow set as a blurred background for the header section. See this screenshot:

If you remove the class "blur-shadow-image" from the Features 9 example it removes it from the background header - but also does not add the blurred shadow.

I do not see similar behavior with other code snippets like "Features 8" which use the same class.


Solution

Additional comments

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions