Minor CSS bug: italics in descriptions are not italic

Bug Reports
, ,
1

Platform: Web (both mobile & desktop)

Browser, if a website issue: All

URLs (aka web addresses) of any relevant observations or pages: https://www.inaturalist.org/observations/392987378 (this is just one example)

Description of problem:

Recently, something changed in the stylesheets so that italics in observation descriptions — i.e., text entered between asterisks — are not showing up as italics. (Italics in comments are still OK.)

Technical details: italics are rendered using the <em> tag, and now there’s a CSS rule that for some reason neuters the <em> tags in the “description” block. The rule, in the .css file called “application_bundle-d7ce9f9aed2c2128a23e80bdfe16779bed62a361af5a6cfe65f4a377b56a9ccb.css” (as of 8/20/26, anyway), looks like this:

.description em{font-style:normal;color:#333}

Why is that “normal” in there? It’s very useful to be able to italicize taxon names in the Notes field.

2

That text shows as italics for me

3

Where are you viewing it? In the iNat app? (I didn’t check in the app.)

Oddly, the italics show up if I view it in a Web browser when NOT logged in. There must be a different batch of CSS files that are loaded for logged-in users.

4

both in the new iOS app, and also in a web browser while logged in:

image
image1138×364 17.3 KB

5

That’s weird. Is it possible that only the owner of the observation sees non-italics?

6

Here’s some extremely technical details that partially explain what’s happening:

When I’m NOT logged in, these are the HTML containers that hold the “Notes”:

<div class="upper">
  <div class="container">
    <div class="row">
      <div class="middle_left col-xs-7">
        <div class="row">
          <div class="col-xs-12">
            <h3>Notes</h3>
            <div class="UserText ">
              <span class="content">
                <p>[NOTES ARE HERE]</p>

When I’m logged in, these are the HTML containers that hold the “Notes”:

<div class="upper">
  <div class="middle">
    <div class="middle_left">
      <div class="notes_col">
        <div class="description">
          <h3>Notes</h3>
          <div class="UserText ">
            <span class="content">
              <p>[NOTES ARE HERE]</p>

The structure of the page is very different, at least in terms of the CSS class names; the “description” class is never invoked in the first block, so the <em> tag is never neutered.

To properly diagnose it, I’d have to see the HTML source of a logged-in user other than myself. I now think that this is happening because I opted in to the “responsive design” beta test.

7

I can reproduce with your example observation.

And I’m in active beta testing too. Any help to get this HTML part you need? I don’t know where to look. O:)

8

I don’t think I need any more info. I also confirmed with a friend who wasn’t in the beta program and DID see the italics, then joined the program and DIDN’T see them. So that’s absolutely the source of the problem.

9

Thanks, I can replicate. We’ll make an issue.

10

@tiwane If/when I find more glitches in the mobile-friendly stuff, is it better to report it here, to use the “feedback” link in my Account Settings page, or something else?

11

Please use this form for bugs related to the mobile responsiveness testing: https://inaturalist.typeform.com/to/HZsu49MO Thanks!

12

This has been fixed.